<template>
  <view class="orders">
    <view v-for="order in orders" :key="order.uid" class="order" @click="toOrderDetails(order.uid)">
      <view class="order-title">
        <p class="order-title-time">下单时间:{{ order.created_at.replace(/-/g,'/') }}</p>
        <view
          :class="'order-title-statu ' + order.status_display"
        >
          {{ statusView(order.status_display) }}
        </view>
      </view>
      <view class="order-content">
        <view class="order-content-left">
          <image
            class="order-content-left-image"
            :src="order.get_products[0].cover_display"
          />
        </view>
        <view class="order-content-right">
          <view class="order-content-right-top">{{ order.get_products[0].product_name }}</view>
          <view class="order-content-right-bottom">
            <font>×{{ order.get_products[0].product_number }}</font>
            <font>￥{{ order.payment_amount }}</font>
          </view>
        </view>
      </view>
      <view v-if="order.status_display === 'UNPAID'" class="order-bottom">
        <button class="order-bottom-btn" @click.stop="toPlay(order)">前往付款</button>
      </view>
    </view>
  </view>
</template>
<script>

import { ticketPayment } from '@api/order'
import { showToast } from '@utils/myApproach'

export default {
  props: {
    orders: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data(props) {
    return {
      isShow: false
    }
  },
  methods: {
    toOrderDetails(uid) {
      uni.navigateTo({
        url: `/pages/mine/default/orderDetails?uid=${uid}`
      })
    },
    toPlay(order) {
      ticketPayment('ubrOrder', order.uid).then(res => {
        this.query = res.data.data
      }).then(res => {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: String(this.query.timeStamp),
          nonceStr: this.query.nonceStr,
          package: this.query.package,
          signType: this.query.signType,
          paySign: this.query.paySign,
          success: res => {
            console.log(order)
            console.log(res)
            console.log(33333)
            uni.redirectTo({
              url: `/pages/payment/paymentOrder?query=${JSON.stringify(
                order
              )}`
            })
          },
          fail: () => {
            showToast('未支付成功，请及时支付订单')
          }
        })
      })
    },

    // 状态标签
    statusView(status_value) {
      switch (status_value) {
        case 'UNPAID':
          return '待付款'
        case 'NORMAL':
          return '可使用'
        case 'PROCESS':
          return '处理中'
        case 'CLOSE':
          return '已关闭'
        case 'REFUND':
          return '已退款'
        case 'COMPLETED':
          return '已完成'
        default:
          return '未定义'
      }
    }
  }
}
</script>
<style lang='scss'>
  /* 外层容器 */
  .orders{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #F8F8F8;
  }
  .order{
    width: 710rpx;
    margin: 20rpx 30rpx 0rpx 30rpx;
    box-sizing: border-box;
    padding: 30rpx 30rpx 10rpx 30rpx;

    border-radius: 8rpx;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    font-size: 24rpx;

    background-color: #ffffff;
  }

  .order-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-title-statu {
    width: 124rpx;
    height: 50rpx;
    border-radius: 25rpx 0 0 25rpx;

    text-align: center;
    line-height: 50rpx;

    font-size: 28rpx;
    color: #FFFFFF;

    transform: translateX(30rpx);
  }
  .UNPAID {
    background-color: #F86C6C;
  }
  .statu-green {
    background-color: #2DCC79;
  }
  .statu-orange {
    background-color: #FFA459;
  }
  .CLOSE {
    background-color: $uni-status-close-color;
  }
  .REFUND {
    background-color:$uni-status-refund-color;
  }

  .order-content {
    height: 168rpx;
    margin: 20rpx 0 20rpx 0;
    display: flex;
  }
  .order-content-left-image {
    height: 100%;
    width: 200rpx;
    object-fit: cover;
  }

  .order-content-right {
    height: 168rpx;
    box-sizing: border-box;
    flex: 1;
    padding: 0 10rpx;

    font-size: 32rpx;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .order-content-right-bottom {
    display: flex;
    justify-content: space-between;
  }
  .order-content-right-bottom>font:nth-child(2) {
    color: #DD3939;
  }
  .order-bottom {
    position: relative;
    z-index: 100;
    width: 710rpx;
    height: 130rpx;
    box-sizing: border-box;

    padding-top: 30rpx;
    padding-left: calc(100% - 142rpx);
    padding-right: 30rpx;

    border-top: 1px solid #F1F1F1;
    transform: translateX(-30rpx);
  }

  .order-bottom-btn {
    width: 172rpx;
    height: 64rpx;

    border:1px solid #306DE9;
    color: #306DE9;
    font-size: 28rpx;
    line-height: 64rpx;
    background-color: transparent;
  }
</style>
